<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="请输入栏目名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="primary" icon="el-icon-lx-add" @click="handleAdd">添加</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="channel_pk"
                    border
                    :expand-row-keys="expands"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="channel_name"
                        label="栏目名称"
                        sortable
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="channel_pk"
                        label="栏目ID"
                        sortable
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="channel_parent"
                        label="父栏目ID"
                        sortable
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="channel_english"
                        label="栏目英文名称"
                        sortable
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="channel_path"
                        label="栏目所在目录"
                        sortable
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="channel_content_template"
                        label="内容页模板"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="channel_page_template"
                        label="分页模板"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="channel_page_count"
                        label="每页条数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="channel_list_template"
                        label="列表页模板"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="channel_list_count"
                        label="列表页内容条数"
                        width="100">
                </el-table-column>
                <el-table-column
                    prop="channel_state"
                    label="状态"
                    :formatter="stateFormat"
                    sortable
                    width="120">
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <cesEdit :Visible="cesEditVisible"  :data="form" :titleName="titleName" ref="cesEditVisible"></cesEdit>
        </div>
    </div>
</template>

<script>
    import cesEdit from './edit'
    export default {
        components : {
            cesEdit
        },
        //弹出页面保存完数据后调用该页面的pages方法刷新列表数据
        provide(){
            return{
                refresh:this.refresh
            }
        },
        //弹出页面保存完数据后调用该页面的pages方法刷新列表数据
        data() {
            return {
                url_page: '/cms/channel/list',
                url_delete: '/cms/channel/delete',
                titleName:'',//动态设置弹框页面的标题
                cesEditVisible:false,
                select_word:'',
                //设置需要展开的菜单的id
                expands:[],
                tableData : [],//表格数据
                form: {
                    channel_pk:'',
                    channel_name:'',
                    channel_parent:'',
                    channel_english:'',
                    channel_path: '',
                    channel_content_template: '',
                    channel_page_template:'',
                    channel_page_count: '',
                    channel_list_template: '',
                    channel_list_count: '',
                    channel_state: '',
                }
            }
        },
        created(){
            this.cesEditVisible=false;
            this.search();
        },
        methods: {
            stateFormat(row, column) {
                // console.log(row.channel_state)
                if (row.channel_state == 0) {
                    return '启动'
                } else if (row.channel_state == 1) {
                    return '禁用'
                }
            },
            //刷新
            refresh(){
                this.select_word='';
                this.form={};
                this.search();
            },
            // 获取分页数据
            search() {
                this.cesEditVisible = false;
                this.form.channel_name = this.select_word;
                this.$post(this.url_page,this.form).then(res => {
                    if(res){
                        this.tableData = res
                        const result = res;
                        result.forEach((r)=>{
                          this.expands.push(r.channel_pk);
                        });
                    }
                })
            },
            //跳转添加
            handleAdd(){
                this.cesEditVisible=true;
                this.titleName = '新增';//动态设置弹框页面的标题为新增
                this.form={channel_pk:'',channel_state:'0'};
            },
            //跳转编辑页面
            handleEdit(index,row){
                this.cesEditVisible=true;
                this.form = {
                    channel_pk:row.channel_pk,
                    channel_name:row.channel_name,
                    channel_parent:row.channel_parent,
                    channel_english:row.channel_english,
                    channel_path: row.channel_path,
                    channel_content_template: row.channel_content_template,
                    channel_page_template:row.channel_page_template,
                    channel_page_count: row.channel_page_count,
                    channel_list_template: row.channel_list_template,
                    channel_list_count: row.channel_list_count,
                    channel_state: row.channel_state,
                };
                // this.$refs.cesEditVisible.setIcon(row.menu_icon);
            },
            //调整删除
            handleDelete(index, row) {
                debugger;
                if (row.children.length === 0) {
                    this.$confirm('确定要删除数据吗？', '提示', {
                        confirmButtonText: '确定', cancleButtonText: '取消', type: 'warning'
                    }).then(() => {
                        this.$post(this.url_delete, {channel_pk: row.channel_pk}).then(res => {
                            this.$message({type: res.code, message: res.msg});
                            this.search();
                        }).catch(() => {
                            debugger
                        });
                    }).catch(() => {
                        debugger
                    });
                } else {
                    this.$message({type: '', message: '该菜单含有下级菜单，无法删除'});
                }
            },
        },
        /*全页面监听回车查询事件*/
        mounted() {
            let _this = this
            document.onkeydown = function (e) {
                if (e.keyCode === 13) {
                    _this.search();
                }
            }
        }
    }
</script>

<style scoped>
    @import "../../../../assets/css/common.css";
</style>